<template>
  <div>
    <div style="color: #666; display: inline-block; line-height: 50px; ">选项:<em style="color: red">*</em></div>
    <el-button size="small" @click="addChoice">添加选项</el-button>
    <div v-for="(item, idx) in choiceArray">
      <div style="line-height: 50px; ">
        <div style="display: inline-block; ">
          <span style="color: #666; ">{{ String.fromCharCode(65 + idx) + '. ' }}</span>
          <em style="color: red">*</em>
        </div>
        <el-button icon="el-icon-refresh" title="切换为富文本" v-if="choiceTypeArray[idx] === 'Input'" size="small"
                   @click="switchChoiceType(idx)">切换为富文本</el-button>
      </div>
      <div style="width: 70%; display: inline-block; ">
        <KindEditor :content="choiceArray[idx]"
                    @update:content="val => updateChoice(val, idx)"
                    :editorType="choiceTypeArray[idx]"
                    :uploadPath="'exercise/' + exerciseEntry.id"/>
      </div>
      <el-button class="reorder-button" icon="el-icon-top" title="上移"
                 v-if="idx !== 0" @click="choiceMoveUp(idx)"></el-button>
      <el-button class="reorder-button" icon="el-icon-bottom" title="下移"
                 v-if="idx !== choiceArray.length - 1" @click="choiceMoveUp(idx + 1)"></el-button>
      <el-button class="reorder-button" icon="el-icon-delete" plain title="删除"
                 type="danger" @click="deleteChoice(idx)"></el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "EditChoiceArray",
    props: ['choiceArray', 'exerciseEntry'],
    data() {
      return {
        choiceTypeArray: [],  // 当前选项是富文本还是输入框, inputFlag;
      }
    },
    methods: {
      updateChoice(val, idx) {
        if (this.choiceTypeArray[idx] === 'Input' && !val.startsWith('<p>')) {
          val = '<p>\n' + val + '\n</p>'
        }
        this.choiceArray[idx] = val
      },
      choiceMoveUp(idx) {
        let tempChoice = this.choiceArray[idx]
        this.choiceArray.splice(idx, 1)
        this.choiceArray.splice(idx - 1, 0, tempChoice)

        let tempChoiceType = this.choiceTypeArray[idx]
        this.choiceTypeArray.splice(idx, 1)
        this.choiceTypeArray.splice(idx - 1, 0, tempChoiceType)
      },
      addChoice() {
        this.choiceArray.push('')
        this.choiceTypeArray.push('Input')
      },
      deleteChoice(idx) {
        this.choiceArray.splice(idx, 1)
        this.choiceTypeArray.splice(idx, 1)
      },
      switchChoiceType(idx) {
        this.choiceTypeArray[idx] = 'RichEditor'
        this.$forceUpdate()
      },
    },
    created() {
      // 选项, 如果只有一段内容, 则用普通输入框, 如果有多段内容, 则用富文本;
      for (let choice of this.choiceArray) {
        let tempDiv = document.createElement('div');
        tempDiv.innerHTML = choice
        if (tempDiv.getElementsByTagName('p').length > 1) {
          this.choiceTypeArray.push('RichEditor')
        }
        else {
          this.choiceTypeArray.push('Input')
        }
      }
    }
  }
</script>

<style scoped>
  .reorder-button {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0;
    margin: 0;
    vertical-align: top;
  }
</style>
